<template>
  <vab-dialog :title="dialogTitle" v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen width="80%">
    <template #default>
      <CommonForm
        ref="commonFormRef"
        v-model="form"
        v-loading="formLoading"
        :layout-config="layoutConfig"
        :option="option"
        @on-cancel="onHandleCancel"
        @on-success="onHandleSuccess"
      >
        <template #permsSlot>
          <el-select v-model="form.permsxxx" placeholder="请选择按钮编码" @change="onHandleChange">
            <el-option v-for="item in rescodeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </template>
      </CommonForm>
    </template>
  </vab-dialog>
</template>

<script>
import CommonForm from "@/plugins/form/CommonForm.vue";
import VabDialog from "@/plugins/VabDialog/index.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import { getLocalStorage } from "@/api/mains";

export default defineComponent({
  name: "JobEdit",
  components: {
    CommonForm,
    VabDialog
  },
  emits: { "on-success": null },
  setup(props, { expose, emit }) {
    const state = reactive({
      dialogTitle: "",
      detailUrl: "system/menu",
      addUrl: "system/menu/menuRes/add",
      updateUrl: "system/menu/menuRes/update",
      rescodeList: [],
      httpMethod: [],
      restype: [],
      isShowDialog: false,
      formLoading: false,
      layoutConfig: {
        //form组件布局
        column: 2
      }
    });

    const form = ref({});
    const option = {
      column: [
        {
          label: "快捷选入",
          prop: "selectNode",
          type: TableColumnOrFormTypeEnum.SLOT,
          slotName: "permsSlot"
        },
        {
          label: "按钮名称",
          prop: "nodename",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "按钮编码",
          prop: "path",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "按钮权限",
          prop: "perms",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "备注",
          prop: "memo",
          type: TableColumnOrFormTypeEnum.TEXTAREA,
          expand: 2
        }
      ],
      formConfig: {
        title: "",
        isInModal: true
      },
      rules: {
        path: [
          {
            required: true,
            message: "请输入按钮编码",
            trigger: "blur"
          },
          {
            min: 2,
            max: 20,
            message: "按钮编码长度为2到20",
            trigger: "blur"
          }
        ],
        perms: [
          {
            required: true,
            message: "请输入按钮权限",
            trigger: "blur"
          },
          {
            min: 2,
            max: 50,
            message: "按钮权限长度为2到50",
            trigger: "blur"
          }
        ],
        nodename: [
          {
            required: true,
            message: "请输入按钮名称",
            trigger: "blur"
          },
          {
            min: 2,
            max: 100,
            message: "按钮名称为2到100",
            trigger: "blur"
          }
        ],
        memo: [
          {
            required: false,
            message: "请输入备注",
            trigger: "blur"
          },
          {
            min: 2,
            max: 200,
            message: "备注为2到200",
            trigger: "blur"
          }
        ]
      },
      submitUrl: state.addUrl
    };

    const showDialog = row => {
      state.formLoading = true;

      //枚举数据缓存
      state.restype = getLocalStorage().ResourceType;
      state.httpMethod = getLocalStorage().MethodType;
      state.rescodeList = getLocalStorage().ResBtnCode;

      if (row && row.id) {
        state.dialogTitle = "编辑";
        form.value = row;
        option.submitUrl = state.updateUrl;
      } else {
        state.dialogTitle = "新增";
        form.value = row;
        option.submitUrl = state.addUrl;
      }
      state.formLoading = false;
      state.isShowDialog = true;
    };

    const onHandleSuccess = () => {
      emit("on-success");
      state.isShowDialog = false;
    };

    const onHandleCancel = () => {
      state.isShowDialog = false;
    };

    const onHandleChange = code => {
      const item = state.rescodeList.find(item => item.dictValue === code);
      form.value.path = item.dictValue;
      form.value.nodename = item.dictLabel;
      form.value.perms = "xxx:xx:" + item.dictValue;
    };

    expose({ showDialog });
    return {
      ...toRefs(state),
      form,
      option,
      onHandleSuccess,
      onHandleCancel,
      onHandleChange
    };
  }
});
</script>
